<template>
  <div style="width: 100%; height: 100%">
    <el-carousel
      :height="props.height"
      :initial-index="props.initialIndex"
      :trigger="props.trigger"
      :autoplay="props.autoplay"
      :interval="props.interval"
      :indicator-position="props.indicatorPosition"
      :arrow="props.arrow"
      :type="props.type"
      :loop="props.loop"
      :direction="props.direction"
      :pause-on-hover="props.pauseOnHover"
      @change="handleChange"
    >
      <el-carousel-item
        v-for="(item, index) in props.items"
        :key="index"
        :name="item.name"
        :label="item.label"
      >
        <div class="carousel-item" :style="getItemStyle(item, index)">
          <div v-if="item.type === 'image'" class="image-container">
            <img :src="item.content" :alt="item.title" class="carousel-image" />
            <div v-if="item.title" class="image-title">{{ item.title }}</div>
          </div>
          <div v-else-if="item.type === 'text'" class="text-container">
            <h3 v-if="item.title" class="text-title">{{ item.title }}</h3>
            <p class="text-content">{{ item.content }}</p>
          </div>
          <div v-else class="custom-container">
            <h3 v-if="item.title" class="custom-title">{{ item.title }}</h3>
            <div class="custom-content" v-html="item.content"></div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { ElCarousel, ElCarouselItem } from 'element-plus';

interface CarouselItem {
  name?: string;
  label?: string;
  title?: string;
  content: string;
  type?: 'image' | 'text' | 'custom';
  backgroundColor?: string;
  textColor?: string;
}

const props = defineProps({
  height: {
    type: String,
    default: '300px'
  },
  initialIndex: {
    type: Number,
    default: 0
  },
  trigger: {
    type: String as () => 'hover' | 'click',
    default: 'hover'
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  indicatorPosition: {
    type: String as () => 'outside' | 'none' | '',
    default: ''
  },
  arrow: {
    type: String as () => 'always' | 'hover' | 'never',
    default: 'hover'
  },
  type: {
    type: String as () => 'card' | '',
    default: ''
  },
  loop: {
    type: Boolean,
    default: true
  },
  direction: {
    type: String as () => 'horizontal' | 'vertical',
    default: 'horizontal'
  },
  pauseOnHover: {
    type: Boolean,
    default: true
  },
  items: {
    type: Array as () => CarouselItem[],
    default: () => [
      {
        title: '轮播图1',
        content: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        type: 'image',
        backgroundColor: '#99a9bf'
      },
      {
        title: '轮播图2',
        content: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        type: 'image',
        backgroundColor: '#d3dce6'
      },
      {
        title: '轮播图3',
        content: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        type: 'image',
        backgroundColor: '#e5e9f2'
      }
    ]
  }
});

const emit = defineEmits(['change']);

const getItemStyle = (item: CarouselItem, index: number) => {
  const style: Record<string, string> = {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };

  if (item.backgroundColor) {
    style.backgroundColor = item.backgroundColor;
  } else {
    // 默认背景色
    const colors = ['#99a9bf', '#d3dce6', '#e5e9f2', '#8492a6', '#c6e2ff'];
    style.backgroundColor = colors[index % colors.length];
  }

  if (item.textColor) {
    style.color = item.textColor;
  }

  return style;
};

const handleChange = (current: number, prev: number) => {
  emit('change', current, prev);
  console.log('Carousel changed from', prev, 'to', current);
};
</script>

<style scoped>
.carousel-item {
  width: 100%;
  position: relative;
}

.image-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
}

.text-container {
  text-align: center;
  padding: 40px 20px;
  width: 100%;
}

.text-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: inherit;
}

.text-content {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}

.custom-container {
  text-align: center;
  padding: 40px 20px;
  width: 100%;
}

.custom-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: inherit;
}

.custom-content {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}
</style>
